<template>
  <div class="addgoods">
    <el-tabs type="border-card">
      <el-tab-pane label="基础信息">
        <div class="addgoods01">
          <Onput />
        </div>
      </el-tab-pane>

      <el-tab-pane label="商品属性">
        <div class="addgoods01">
          <GoodsConfig />
        </div>
      </el-tab-pane>

      <el-tab-pane label="商品详情">
        <div class="goods_desc">
          <quill-editor v-model="goods.subsign.goods_desc"></quill-editor>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
// 引入组件
import Footer from "@/components/footer/footer";
import Onput from "@/components/goods/addput";
import GoodsConfig from "@/components/goods/goodsConfig";

//引入API
import { getGoodsDetails } from "@/request/api.js";

//引入vuex
import { mapState } from "vuex";

export default {

  computed: {
    ...mapState(["goods"])
  },
  created() {
    // console.log(this.$route.params.id)
    //清空内容
    let createds = {
      list_pic_url: "",
      primary_pic_url: "",
      category_id: "",
      type: [],
      gallery: [],
      gallerys: [],
      attribute: [],
      name: "",
      brand_id: "",
      goods_brief: "",
      goods_unit: "",
      goods_number: "",
      retail_price: "",
      is_new: false,
      is_hot: false,
      is_delete: false,
      sort_order: "",
      goods_desc: ""
    };
    this.$store.commit("goodscreatedsubsign", createds);

    //获取两个数组
    this.$store.dispatch("goodsaddput");

    //判断是不是编辑内容
    if (this.$route.params.id) {
      getGoodsDetails({
        id: this.$route.params.id
      }).then(res => {
        // console.log("获取到商品详情", res.data);
        this.$store.commit("goodseditsubsign", res.data);
      });
    }
  },

  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {
    handleSelect() {}
  },
  components: {
    Footer,
    Onput,
    GoodsConfig
  }
};
</script>

<style lang='less' scoped>
/deep/.goods_desc .ql-editor{
  overflow-y: auto;
  height: 500px;
  // background-color:red;
}
/deep/.goods_desc .ql-editor::-webkit-scrollbar{
  width: 0;
}
.addgoods {
  box-sizing: border-box;
  background-color: #fff;
  height: 95%;
  overflow-y: auto;
  .addgoods01 {
    margin: 10px 0 0 20px;
  }
}
</style>